<?php
namespace modules\gallery;
use \modules\ui;

class page
{
    static function mapping()
    {
        return [
            '/' => 'gallery',
        ];
    }

    static function gallery($q, $html, &$args)
    {
        $args['SUBTITLE'] = "UI 展馆";
        $args['HEADER-CONTROL'] = ui::header_control($html, [
            [ui::icon_label('链接', 'edit'), "/gallery"],
            [ui::icon_label('调用1（会失败）', 'trash'),
                'data-api' => '/api/gallery/echo',
                'data-api-id' => '1',
                'data-api-hello-world' => 'world',
                'data-redirect' => '/gallery',
            ],
            [ui::icon_label('调用2（会失败）', 'plus'),
                'data-api' => '/api/gallery/echo',
                'data-api-id' => '2',
                'data-redirect' => '/gallery',
            ],
            [ui::icon_label('调用3（成功并刷新）', 'pencil'),
                'data-api' => '/api/gallery/ok',
                'data-api-id' => '3',
            ],
        ]);
        return $html->mark(['.',
            [ 'p', "这里展示所有 UI 组件。" ],
            ui::card("这是卡片。这里是正文。", "卡片（card）。这里是标题"),
            ui::card("这是没有标题的卡片。这里是正文。"),
            ui::card(['.',
                [ 'p',
                    "使用 HTML 的 p 标签可以形成段落。这一段很长，很长，" .
                    "很长，很长，很长，很长，很长，很长，很长，很长，很长" .
                    "很长，很长，很长，很长，很长，很长，很长，很长，很长" .
                    "很长，很长，很长，很长，很长，很长，很长，很长，很长" .
                    "很长，很长，很长，很长，很长，很长，很长，很长，很长" .
                    "很长，很长，很长，很长，很长，很长，很长，很长，很长。"
                ],
                [ 'p',
                    "使用 HTML 的 p 标签可以形成段落。这一段短一些，" .
                    "很短，很短，很短，很短，很短，很短，很短，很短，很短" .
                    "很短，很短，很短，很短，很短，很短，很短，很短，很短。"
                ],
                [ 'p', "真的短，短出声。" ],
            ], "段落（<p>）"),
            ui::card("就是页面右上角的几个带图标的链接。", "头部控件（Header Control）"),
            ui::card(['.',
                ui::pager(function ($page) { return "javascript:alert('跳转到第 $page 页')"; }, 1, false),
                ui::pager(function ($page) { return "javascript:alert('跳转到第 $page 页')"; }, 2, false),
                ui::pager(function ($page) { return "javascript:alert('跳转到第 $page 页')"; }, 1, true),
                ui::pager(function ($page) { return "javascript:alert('跳转到\"&（转义测试）第 $page 页')"; }, 2, true),
            ], "分页器（Pager）"),
            ui::card(ui::form($html, '/api/gallery/echo',
                ui::icon_label('提交', 'sign-in'),
                self::form_fields(), [
                    [ui::icon_label('取消', 'angle-left'), '#cancel'],
                ], '#success'),
            "表单（Form）"),
            ui::card(
                ui::readonly_form($html, self::form_fields()),
                "只读表单（Readonly Form）"),
            ui::card(ui::list([
                ["标题（title）", "正文（text）", [
                    [ui::icon_label('链接1', 'edit'), "/gallery#1"],
                    [ui::icon_label('链接2', 'plus'), "/gallery#foo1"],
                ]],
                ["你好", "世界", [
                    [ui::icon_label('链接1', 'edit'), "/gallery#2"],
                    [ui::icon_label('链接2', 'plus'), "/gallery#foo2"],
                ], 'href' => '/gallery'],
                ["This is?", "English!", 'href' => '/gallery', [
                    [ui::icon_label('链接1', 'edit'), "/gallery#3"],
                    [ui::icon_label('链接2', 'plus'), "/gallery#foo3"],
                ]],
            ]), "列表（List）"),
        ]);
    }

    private static function form_fields(): array
    {
        return [
            ['text', '用户名', '1', 'name' => 'id'],
            ['password', '密码', 'name' => 'hello-world'],
            ['password', '再次输入密码', 'data-same-value' => 'hello-world'],
            ['longtext', '啰嗦', null, true, 'name' => 'chat'],
            ['enum', '角色', ['user', 'admin' => '管理员', 'user' => '用户', 'other' => '其它', 'other2' => '其它2'], 'name' => 'role'],
            ['date', '日期', 'name' => 'date'],
            ['date', '今天', new \DateTime() ],
            ['date', '某天', 19950222 ],
            ['date', '甚至', '1995-02' ],
            ['int', '数量', 3, 'name' => 'quantity', 'min' => 1, 'max' => 5],
        ];
    }
}

